<!--邀请好友-合伙人-->
<template>
  <div class="bg" @viewappear="viewappear">
    <scroller class="all">
      <div v-if="data" class="wrapper">
        
        <!--头部-->
        <LImage class="img-head" :src="Config.img('hhr_activity_desgin aids_top.png')"></LImage>
        <div class="guizhe" @click="guizheActivityClick"></div>
        
        <!--如何获取奖励-->
        <div class="acenter">
          <div class="kuai-content">
            <LImage class="img-shuoming" :src="Config.img('hur_activity_desgin_dils_01.png')"></LImage>
            <div class="height30"></div>
            <div class="row">
              <div class="width40"></div>
              <div class="acenter">
                <text class="font26 text-hui1">{{T('邀请好友')}}</text>
                <div class="height10"></div>
                <text class="font22 text-hui1">{{T('注册Vtrading账户')}}</text>
              </div>
              <div class="widht200"></div>
              <div class="acenter">
                <text class="font26 text-hui1">{{T('获得奖励')}}</text>
                <div class="height10"></div>
                <text class="font22 text-hui1">{{T('好友进行实盘策略交易')}}</text>
              </div>
              <div class="width-10"></div>
            </div>
            <div class="height40"></div>
            <div class="shuoming-line"></div>
            <div class="height30"></div>
            <text class="widht630 font22 text-hui1">{{T('邀请好友使用Vtrading专属链接注册交易账户，您可获得高额奖励。')}}</text>
            <div class="height20"></div>
            <text class="font22 main-t1" @click="urlClick">{{T('专属链接>>')}}</text>
            <div class="height20"></div>
          </div>
          <div class="kuai-title">
            <text class="font30 text1">{{T('如何获取奖励')}}</text>
          </div>
        </div>

        <!--我的邀请码-->
        <div class="height60"></div>
        <div class="acenter">
          <div class="kuai-content">
            <div class="height60"></div>
            <div class="height30"></div>
            <div class="widht630 row acenter">
              <text class="font30 text-hui2">{{T('邀请码')}}</text>
              <div class="all"></div>
              <text class="font30 text-hui2">{{data.inviteMap.inviteCode}}</text>
              <LImage class="copy" :src="Config.img('hhr_activity_but_copy.png')" @click="copyClick"></LImage>
            </div>
            <div class="height40"></div>
            <div class="widht630 row acente">
              <text class="font30 text-hui2">{{T('好友分配比例')}}</text>
              <div class="all"></div>
              <text class="font30 text-hui2">{{data.inviteMap.proportion * 100 + '%'}}</text>
            </div>
            <div class="height60"></div>
            <div class="widht630 row acente">
              <div class="but" @click="shareClick">
                <LImage class="yaoqingma-invite-image" :src="Config.img('yqhy_activity_but_invitation_02.png')"></LImage>
                <text class="font30 text-cheng1">{{T('邀请好友')}}</text>
              </div>
              <div class="all"></div>
              <div class="but" @click="qrcodeClick">
                <LImage class="yaoqingma-code-image" :src="Config.img('yqhy_activity_but_invitation_01.png')"></LImage>
                <text class="font30 text-cheng1">{{T('二维码')}}</text>
              </div>
              <div class="all"></div>
              <div class="but" @click="moreCodeClick">
                <text class="font30 text-cheng1">{{T('更多')}}</text>
              </div>
            </div>
            <div class="height30"></div>
          </div>
          <div class="kuai-title">
            <text class="font30 text1">{{T('我的邀请码')}}</text>
          </div>
        </div>

        <!--我的邀请-->
        <div class="height60"></div>
        <div class="acenter">
            <div class="kuai-content">
              <div class="height60"></div>
              <div class="height60"></div>
              <div class="widht630 row acente" @click="recordClick">
                <div class="acenter all">
                  <text class="font50 text-hui1">{{data.inviteNumber}}</text>
                  <div class="height30"></div>
                  <text class="font22 text-hui1">{{T('邀请人数')}}</text>
                </div>
                <div class="tongji-line"></div>
                <div class="acenter all">
                  <text class="font50 text-hui1">{{jmath.jia(data.totalVtn, data.totalPartnerReward, 4, 2)}}</text>
                  <div class="height30"></div>
                  <text class="font22 text-hui1">{{T('奖励(VTN)')}}</text>
                </div>
              </div>

              <div class="height60"></div>
              <div :class="['hang-bg1','hang-bg2']">
                <text class="font22 text-hui1">{{T("累计邀请实盘用户数")}}</text>
                <div class="all"></div>
                <text class="font22 text-hui1">{{data.offNumber}}</text>
              </div>

              <div class="height10"></div>
              <div :class="['hang-bg1','hang-bg3']">
                <text class="font22 text-hui1">{{T("邀请实盘成交额")}}</text>
                <div class="all"></div>
                <text class="font22 text-hui1">{{jmath.xiaoshu(data.totalVolume, 4, 2)+" USDT"}}</text>
              </div>

              <div class="height10"></div>
              <div :class="['hang-bg1','hang-bg2']">
                <text class="font22 text-hui1">{{T("合伙人累计奖励")}}</text>
                <div class="all"></div>
                <text class="font22 text-hui1">{{data.totalPartnerReward+" VTN"}}</text>
              </div>

              <div class="height60"></div>
              <div class="but" @click="httpsPartnerUpgrade">
                <text class="font30 text-cheng1">{{T('升级合伙人')}}</text>
              </div>
              <div class="height30"></div>
            </div>
            <div class="kuai-title">
              <text class="font30 text1">{{T('我的邀请')}}</text>
            </div>
        </div>
        <div class="jiangli-bg">
          <text class="font22 text-hui1">{{T('当前邀请交易奖励100%')+'+'+ data.partnerMap.doubleReward * 100 +'%'}}</text>
          <div class="jiangli-dengji">
            <text class="font20 text-cheng2">{{data.partnerMap.grade}}</text>
          </div>
          <div class="all"></div>
          <text class="font22 main-t1" @click="guizheClick">{{T('合伙人规则')}}>></text>
        </div>

        <!--昨日交易记录-->
        <div class="height60"></div>
        <div class="acenter">
          <div class="kuai-content" v-if="data.recodeMapList.length > 0" >
            <div class="height60"></div>
            <div :class="['hang-bg1']">
              <text class="font22 text-hui1">{{T("昨日邀请总成交量")}}</text>
              <div class="all"></div>
              <text class="font22 text-hui1">{{jmath.xiaoshu(data.yestodayTotalVolume,4, 2)+" USDT"}}</text>
            </div>

            <div class="height10"></div>
            <div :class="['hang-bg1','hang-bg2']">
              <text class="font22 text-hui1">{{T("好友UID")}}</text>
              <div class="all"></div>
              <text class="font22 text-hui1">{{T("成交量(USDT)")}}</text>
            </div>

            <div :class="['hang-bg1',index%2==0?'hang-bg3':'hang-bg2']" v-for="(item, index) in data.recodeMapList" v-bind:key="index">
              <text class="font22 text-hui1">{{item.uuid}}</text>
              <div class="all"></div>
              <text class="font22 text-hui1">{{jmath.xiaoshu(item.dayVolume, 4, 2)}}</text>
            </div>
            <text class="jialu-genduo-text" @click="moreRecordClick" >{{T('更多记录')}}>></text>
          </div>
          <div class="kuai-content" v-else>
            <div class="acenter">
              <div class="height30"></div>
              <div class="height60"></div>
              <div class="height60"></div>
              <text class="font30 text-hui1">{{T('暂无记录~')}}</text>
              <div class="height60"></div>
              <div class="height60"></div>
              <div class="but" @click="shareClick">
                <text class="font30 text-cheng1">{{T('立即邀请')}}</text>
                </div>
              <div class="height30"></div>
            </div>
          </div>
          <div class="kuai-title"><text class="font30 text1">{{T('昨日交易记录')}}</text></div>
        </div>
      </div>
    </scroller>

    <!--本月战报-->
    <div class="zhanbao" v-if="zhanbao">

      <LImage class="zhanbao-image" v-if="zhanbao" :src="Config.img('zhanbao.png')">
      </LImage>
      <div class="zhanbao-content">
        <div class="height60"></div>
        <div class="height10"></div>
        <text class="font46 text-cheng2">{{T('本月战报')}}</text>
        <div class="height60"></div>
        <div class="height30"></div>
        <text class="font36 text-huang1">{{data.monthTotalVolume+" USDT"}}</text>
        <div class="height40"></div>
        <text class="font36 text-huang1-title">{{T("本月邀请总成交量")}}</text>
        <div class="height60"></div>
        <div class="height30"></div>
        <div class="zhanbao-row">
          <text class="font26 text-cheng2">{{T("本月邀请人数")}}</text>
          <div class="all"></div>
          <text class="font26 text-huang1">{{data.monthInviteNumber+T("人")}}</text>
        </div>
        <div class="height20"></div>
        <div class="zhanbao-row">
          <text class="font26 text-cheng2">{{T("本月邀请实盘用户数")}}</text>
          <div class="all"></div>
          <text class="font26 text-huang1">{{T(data.monthOffNumber+T("人"))}}</text>
        </div>
      </div>
      <div class="height-60"></div>
      <LImage class="zhanbao-close" @click="zhanbao=false"  :src="Config.img('btn_close.png')"></LImage>
    </div>
  </div>
</template>

<style src="@/_css/style.css" ></style>
<style scoped>
.bg {
  background-color:rgba(255,216,185,1);
  flex: 1;
}
.wrapper{
  padding-left: 30px;
  padding-right: 30px;
  padding-bottom: 60px;
}
.copy{
  width: 30px;
  height: 30px;
  margin-left: 20px;
}
.share-image{
  width:25px;
  height:25px;
}

.but{
  flex-direction: row;
  justify-content: center;
  align-items: center;
  height: 65px;
  border-radius:65px;
  background-image: linear-gradient(to bottom right, rgba(255,156,26,1), rgba(255,236,85,1));
  box-shadow:0px 3px 5px 0px rgba(227,69,3,0.4);

  padding-left: 30px;
  padding-right: 30px;
}
.text-hui1 {
  color:rgba(102,102,102,1);
}
.text-hui2 {
  color:rgba(82,82,82,1);
}
.text-cheng1 {
  color:rgba(189,77,3,1);
}
.text-cheng2 {
  color:rgba(255,225,202,1);
}
.text-huang1 {
  color:rgba(252,208,50,1);
}

/******************* 头部*/
.img-head{
  position: relative;
  width: 750px;
  height: 465px;
  margin-left: -30px;
}
.guizhe{
  position: absolute;
  top: 85px;
  right: 0;

  width: 150px;
  height: 85px;
  padding-left: 30px;
  padding-right: 30px;
}

/******************* 块*/
.kuai-content{
  align-items: center;
  width: 690px;
  background-color:#FDEFE3;
  border-radius:12px;
  margin-top: 29px;
}
.kuai-title{
  position: absolute;
  justify-content: center;
  align-items: center;
  background-color:rgba(251,107,73,1);
  height:58px;
  border-radius:12px;

  padding-left: 30px;
  padding-right: 30px;
}

/******************* 如何获取奖励*/
.shuoming {
  width:630px;
}
.img-shuoming {
  margin-top: 57px;
  width:479px;
  height:99px;
}
.shuoming-line{
  height:1px;
  background-color:rgba(254,176,158,1);
}

/******************* 我的邀请码*/
.yaoqingma-invite-image{
  width: 30px;
  height: 30px;
  margin-right: 20px;
}
.yaoqingma-code-image{
  width: 31px;
  height: 31px;
  margin-right: 30px;
}

/******************* 我的邀请*/
.tongji-line{
  width:2px;
  height:105px;
  background-color:rgba(254,176,158,1);
}
.jiangli-bg{
  flex-direction: row;
  align-items: center;
  margin-top: 20px;
  padding-left: 22px;
  padding-right: 22px;
  width:690px;
  height:47px;
  background-color:#E1D8B9;
}
.jiangli-dengji{
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin-left: 15px;
  padding-left: 13px;
  padding-right: 13px;
  height:26px;
  background-color:rgba(255,166,106,1);
  border-radius:13px;
}

/*行条*/
.hang-bg1{
  flex-direction: row;
  align-items: center;
  width:670px;
  height:47px;
  background-color:rgba(220,220,220,0.85);
  padding-left: 20px;
  padding-right: 20px;
}
.hang-bg2{
  background-color:rgba(220,220,220,0.29);
}
.hang-bg3{
  background-color:rgba(220,220,220,0.1);
}

/*记录*/
.jialu-genduo-text{
  height:100px;
  line-height:100px;
  font-size:22px;
  font-family:PingFang SC;
  font-weight:400;
  color:rgba(35,172,255,1);
}
.jilu-kong{
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 690px;
  height: 400px;
  border-radius:10px;
}

/*战报*/
.zhanbao{
  position: absolute;
  justify-content: center;
  align-items: center;
  background-color:rgba(0,0,0,0.4);
  width:750px;
  z-index: 9;
  top:0;
  right: 0;
  bottom:0;
  left:0;
}
.zhanbao-image{
  position: absolute;
  width:660px;
  height:774px;
  margin-top: -110px;
}
.zhanbao-content{
  align-items: center;
  width:660px;
  height:774px;
}
.zhanbao-close{
  width:50px;
  height:50px;
}
.zhanbao-row{
  flex-direction: row;
  align-items: center;
  width:550px;
  height:62px;
  background-color:rgba(255,153,122,0.2);
  border-width: 2px;
  border-color: rgba(254,235,219,1);
  border-radius:31px;

  padding-left: 30px;
  padding-right: 30px;
}

/*间距*/
.widht200 {
  width: 200px;
}
.widht630 {
  width: 630px;
}
</style>

<script>
import jnavigator from "@/_js/navigator";
import jmodal from "@/_js/modal";
import jmath from "@/_js/math";
import jconfig from "@/_js/config";
import jhttps from "@/_js/https";
import jdebug from "@/_js/debug";

const globalEvent = weex.requireModule('globalEvent');
const weexFunction = weex.requireModule("WeexFunction");
const clipboard = weex.requireModule("clipboard");

import I18N from "@/_i18n/i18n";
var T = I18N.t;
weexFunction.setTitle(T("邀请好友"));

export default {
  
  data() {
    return {
      T:T,
      Config:jconfig,
      jmath:jmath,
      oneShow:false,

      data:undefined,
      zhanbao:false,
    };
  },

  mounted() {
    this.httpsPartnerHome();
  },

  methods: {
    
    /*************************************************通信触发*/
    //完全显示
    viewappear() {
      if (this.oneShow){
        this.httpsPartnerHome();
      }
      this.oneShow = true;
    },

    /*************************************************HTTP*/
    //http合伙人首页
    httpsPartnerHome(){
      var param = {};
      jhttps.post("partner/queryParnterInvitePage",param,true,(data)=>{
        jmodal.hideLoad();
        if(data.status == 200){
          this.data = data.data;
        }else{
          jmodal.toast(data.msg);
        }
      });
    },

    //合伙人升级
    httpsPartnerUpgrade(){
      
      jmodal.showLoad();
      var param = {};
      jhttps.postX("partner/upgradePartner",param,true,(data)=>{
        jmodal.hideLoad();
        if(data.status == 200){
          jmodal.toast(T('升级成功'));
          setTimeout(() => {
            jmodal.showLoad();
            this.httpsPartnerHome();
          }, 700);
        }else{
          jmodal.toast(data.msg);
        }
      });
    },


    /************************************************* 点击*/
    //合伙人活动规则
    guizheActivityClick(){
      jnavigator.open("", "invite/PartnerRuleActivity");
    },

    //专属链接
    urlClick(){
      var nav = {'navColor':'#0c0c0c'};
      var param = {'menu':1};
      jnavigator.open('', 'home/ApiAdd', param, nav);
    },

    //复制邀请码
    copyClick(){
      jmodal.toast({'message':T('复制成功'), 'duration':2});
      clipboard.setString(this.data.inviteMap.inviteCode);
    },

    //邀请好友
    shareClick(){

      var scale = this.data.inviteMap.proportion * 100 + "";
      var code = this.data.inviteMap.inviteCode;
      var param = {'inviteScale':scale, 'inviteCode':code};
      jnavigator.openDialog('share/ShareInviteHome', param);
    },

    //二维码
    qrcodeClick(){
      var param = {'inviteCode':this.data.inviteMap.inviteCode};
      jnavigator.openDialog("invite/DialogInvite",param);
    },

    //更多邀请码
    moreCodeClick(){
      jnavigator.open("", "invite/PartnerInviteCode");
    },

    //邀请记录
    recordClick(){
      var param = {'inviteCode':'',
                   'codeName':'全部'};
      jnavigator.open("", "invite/PartnerInviteRecord", param);
    },

    //合伙人规则
    guizheClick(){
      jnavigator.open("", "invite/PartnerRule");
    },

    //更多记录
    moreRecordClick(){
      var total = jmath.xiaoshu(this.data.yestodayTotalVolume,4, 2);
      var param = {'yestodayTotalVolume':total};
      jnavigator.open("", "invite/PartnerOutDealRecord", param);
    },
  }
};
</script>
